<template>
  <div class="user">
    <div class="top">
      <img @click="dialogVisible = true" :src="imageUrl" alt="">
      <div class="font">
        <span>{{ruleForm.nickname}}</span>
        <span>快乐学习每一天</span>
      </div>
    </div>
    <div class="info">
      <div class="title">
        基本信息
      </div>
      <div class="content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="edit">
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性 别" prop="sex">
              <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期" required>
              <el-col :span="11">
                <el-form-item prop="birth">
                  <el-date-picker type="date" format='yyyy-MM-dd' value-format="yyyy-MM-dd" placeholder="选择日期" v-model="ruleForm.birth" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="个人简介" prop="resume">
              <el-input v-model="ruleForm.resume"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-else>
            <el-form-item label="用户昵称:" prop="nickname">
              {{ruleForm.nickname}}
            </el-form-item>
            <el-form-item label="性 别:" prop="sex">
              {{ruleForm.sex}}
            </el-form-item>
            <el-form-item label="出生日期:" required>
              {{ruleForm.birth}}
            </el-form-item>
            <el-form-item label="个人简介:" prop="resume">
              {{ruleForm.resume}}
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="edit=true">修改</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
    <el-dialog
      title="修改头像"
      :visible.sync="dialogVisible"
      width="30%"
      >
     <el-upload
      class="avatar-uploader"
      :auto-upload="false"
      action=""
      :http-request="upimg"
      :on-change="changeImg"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submithead">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'user',
  data(){
    return{
      dialogVisible:false,
      imageUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      edit :false,
      ruleForm: {
        },
        beforeUpdateImg:{},
         rules: {
          nickname: [
            { required: true, message: '请输入用户昵称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          birth: [
            {  required: true, message: '请选择日期', trigger: 'change' }
          ],
          profile: [
            { required: true, message: '请填写个人简介', trigger: 'blur' }
          ]
        }
    }
  },
  components: {

  },
  mounted(){
   this.ruleForm = this.$gl('nowUser')
   console.log(this.$gl('nowUser'))
   if (this.ruleForm.imgurl)this.imageUrl = this.ruleForm.imgurl
  },
  methods:{
    submithead(){
      
        this.dialogVisible = false
    },
     handleAvatarSuccess(file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        let user =this.$gl('userInfo')
        let user2 = this.$gl('userInfo')
        let nu = this.$gl('nowUser')
        nu.imgurl = this.imageUrl
        this.$sl('nowUser',nu),
        user.forEach((item,index)=>{
          if(item.account==nu.account){
            user2[index] = nu
          }
        })
        this.$sl('userInfo',user2)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type ==='image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        console.log(file)
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      upimg(val){
        console.log(val)
      },
      changeImg(file){
        console.log(file)
        const isJPG = file.raw.type === 'image/jpeg'||file.raw.type === 'image/png'||file.raw.type ==='image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
          const self = this
          const reader = new FileReader()
          reader.onload = function(e) {
            self.beforeUpdateImg=
              {
                uid: file.uid,
                photo: reader.result
              }
            
          }
          reader.readAsDataURL(file.raw)
          setTimeout(() => {
             this.imageUrl = this.beforeUpdateImg.photo;
              let user =this.$gl('userInfo')
              let user2 = this.$gl('userInfo')
              let nu = this.$gl('nowUser')
              nu.imgurl = this.imageUrl
              this.$sl('nowUser',nu),
              user.forEach((item,index)=>{
                if(item.account==nu.account){
                  user2[index] = nu
                }
              })
              this.$sl('userInfo',user2)
          }, 10);

      },
      getBase(file){
        return new Promise(function(resolve ,reject){
          let reader = new FileReader();
          let imgResult = ''
          reader.readAsDataURL(file);
          reader.onload = function(){
            imgResult = reader.result;
          };
          reader.onload = function(err){
            reject(err)
          };
          reader.onloadend = function(){
            resolve(imgResult)
          }
        })
      },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm)
            this.$http.editInfo(this.ruleForm).then(res=>{
              this.$sl('nowUser',this.ruleForm),
              this.edit =false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>
<style lang="less" scoped>
.user{
  width: 100%;
  height: 100%;
  padding: 10px;
  .top{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    padding: 24px;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 4%);
    img{
      width: 92px;
      height: 92px;
      margin-right: 20px;
    }
    .font{
      height: 62px;
      text-align: left;
      span:nth-of-type(1){
        display: block;
            color: #222226;
          font-weight: 500;
          line-height: 26px;
          font-size: 24px;
          margin-bottom: 10px;
          margin-right: 16px;
      }
      span:nth-of-type(2){
        display: block;
        padding: 2px 8px;
        min-width: 14px;
        color: #999aaa;
        font-size: 14px;
        background-image: linear-gradient(90deg, rgb(239, 239, 239), rgb(249, 249, 249));
      }
    }
  }
  .info{
    width: 100%;
    min-height: 20px;
    background-color: #fff;
    .title{
      height: 48px;
      line-height: 48px;
      font-size: 18px;
      font-weight: 600;
      color: #2e2e2e;
      padding-left: 16px;
      border-bottom: 1px solid #f0f0f2;
      text-align: left;
      margin-bottom: 20px;
    }
    .content{
      width: 50%;
      padding-bottom: 40px;
    }
  }
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>